<template>
    <div>
        <h1>Post List</h1>
        <ul>
            <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
        </ul>
    </div>
</template>
<script>
// import axios from 'axios'
import {mapState,mapActions}  from 'vuex'

export default {
  name: 'post',
  metaInfo: {
    title: 'post'
  },
  data () {
    return {
    //   posts: []
    }
  },
  computed:{
      ...mapState(['posts'])
  },
  methods:{
      ...mapActions(['getPost'])
  },
  // vue ssr 生命周期钩子，会在渲染前调用，需要返回  promise
  serverPrefetch(){
      return this.getPost()
  }
//   async created () {
//     // 服务端只支持 beforeCreate 和 created，但是不会等异步数据。所有这种做法在服务端渲染中是不会工作的！！！
//     console.log('Posts Created Start')
//     const { data } = await axios({method: 'GET',url: 'https://cnodejs.org/api/v1/topics'})
//     this.posts = data.data
//   }
}
</script>